import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import Taro from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { AtFloatLayout } from 'taro-ui';
import pClose from '@/images/common/circleClose.png';
import pChecked from '@/images/cart/selected.svg';
import pDisabled from '@/images/cart/disabled.png';
import 'taro-ui/dist/style/components/float-layout.scss';
import './index.scss';
import ImageOrIcon from '@/components/ImageOrIcon';

const AddressSelect = ({
  dispatch,
  isOpened,
  handleClose,
  allAddresses = [],
  selectedAddress = {},
  locationAddress = null,
}) => {
  useEffect(() => {
    if (isOpened && !allAddresses?.length) {
      dispatch({ type: 'giftCard/allAddressesModel' });
    }
  }, [isOpened]);

  const handleCheck = (address) => {
    dispatch({ type: 'productCar/setSelectedAddress', payload: { ...address } });
    handleClose(address);
  };

  const handleAddBtn = () => {
    dispatch({ type: 'giftCard/adressId', payload: null });
    Taro.navigateTo({ url: '/giftCardSubPack/addAddress/index' });
  };

  return (
    <AtFloatLayout isOpened={isOpened} onClose={handleClose} className="addressSelect" catchMove>
      <View className="addressContent">
        <Image className="closeIcon" src={pClose} onClick={handleClose} />
        <View className="header">{allAddresses?.length > 0?'选择收货地址':'请新建收货地址'}</View>
        {/* {locationAddress && (
          <View className="ncenter item" key="addr_location">
            <Image className="checkIcon" src={pLocation} />
            <Text className={['txt', selectedAddress.id == undefined && 'active'].join(' ')}>
              {locationAddress.address}
            </Text>
          </View>
        )} */}
        <View className="select-list no-bar">
        {allAddresses?.length > 0 ?
          allAddresses.map((addr, index) => (
            <View
              className="ncenter item addrLine"
              key={'addr_' + index}
            >
              {addr.id == selectedAddress.id?<ImageOrIcon
                {...{
                  className: 'checkIcon',
                  name: selectedAddress.id && 'icon_chose',
                  size: 31,
                  src: pChecked,
                }}
              />:<Image
                className="checkIcon"
                src={pDisabled}
              ></Image>}
              <View className="item-info" onClick={() => handleCheck(addr)}>
                <Text className={['txt', selectedAddress.id == addr.id && 'active'].join(' ')}>
                  {addr.address + addr.houseNumber}
                </Text>
                <View className="info-p">{addr.contactName + ' ' +addr.mobile}</View>
              </View>
              <Image src={require('@/images/common/edite.png')} className='edit-img' onClick={()=>{
                dispatch({ type: 'giftCard/adressId', payload: {id:addr.id} });
                Taro.navigateTo({ url: `/giftCardSubPack/addAddress/index?id=${addr.id}` });
              }}></Image>
            </View>
          )):<View className="var-empty">
            <Image src={require('@/images/common/noTip.png')} mode='widthFix' className="empty-img" />
            <View>没有收货地址 <br /> 点击下方按钮新增</View>
          </View>}
        </View>
        <View className="addressBottom">
          <View className="btn-red" onClick={handleAddBtn}>
            新增地址
          </View>
        </View>
      </View>
    </AtFloatLayout>
  );
};
export default connect(({ giftCard, productCar }) => ({
  allAddresses: giftCard.allAddresses,
  selectedAddress: productCar.selectedAddress,
  locationAddress: productCar.locationAddress,
}))(AddressSelect);
